<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .all {
            
            width: 200px;
            height: 354px;
            background-color: #0d072d;
            transform: translateX(-100%);
             position: fixed;
             left: 0;
             top: 0;
           
        }

        .top {

            width: 100%;
            height: 50px;
            border-bottom: 1px solid #ccc;


        }

        .top:first-child {
            color: #0173b6;
            font-size: 20px;
            line-height: 50px;
            float: left;
        }

        .top .iconfont {
            font-size: 40px;
            color: white;
            line-height: 50px;
            float: right;
        }

        .bottom {
            width: 100%;
            height: 50px;
            color: white;
            line-height: 50px;
            border-bottom: 1px solid #ccc;

        }

        .bottom .iconfont {
            float: left;
        }

        .right {
            float: right;
            transition: all;
           
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <input type="button" value="add" @click="add()">
        </div>
        <div class="all"  :style="stystr" @click.stop>
            <div class="top">
                <span >热门课程</span> <span class="iconfont icon-guanbi"  @click="can()" :style="stystr"></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-java"> JAVA课程</span> <span class="right">></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-WEBqianduan"> Web大前端</span> <span class="right">></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-python"> Python大数据</span> <span class="right">></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-icon-test"> 软件测试</span> <span class="right">></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-anzhuo"> Android课程</span> <span class="right">></span>
            </div>
            <div class="bottom">
                <span class="iconfont icon-php"> Php课程</span> <span class="right">></span>
            </div>
            


        </div>
        <script type="module">
            import { createApp } from "./assets/vue3/vue.esm-browser.prod.js";
            createApp({
                data() {
                    return {
                        
                        stystr:{
                                transform: "translateX(-100%)",
                              transition: "all 0.5s ease"
                            
                        }
                        
                    }
                },
                methods:{
                    add(){
                        this.stystr.transform = "translateX(0)"
                    },
                    can(){
                        this.stystr.transform = "translateX(-100%)"
                    }
                }
            }).mount("#app");
        </script>
</body>

</html>